<template>
  <div class="advanced-filter">
    <Card title="高级筛选" :bordered="false">
      <Form
        ref="filterForm"
        :model="filterForm"
        layout="inline"
        class="filter-form"
      >
        <FormItem label="时间范围">
          <RangePicker
            v-model:value="dateRange"
            format="YYYY-MM-DD"
            placeholder="['开始日期', '结束日期']"
            @change="handleDateRangeChange"
            style="width: 240px"
          />
        </FormItem>
        
        <FormItem label="事件类型">
          <Select
            v-model:value="filterForm.eventType"
            placeholder="选择事件类型"
            allow-clear
            style="width: 120px"
            @change="handleFilterChange"
          >
            <SelectOption value="申请">申请</SelectOption>
            <SelectOption value="公布">公布</SelectOption>
          </Select>
        </FormItem>
        
        <FormItem label="发明人">
          <Select
            v-model:value="filterForm.inventor"
            placeholder="选择发明人"
            allow-clear
            show-search
            :filter-option="filterOption"
            style="width: 200px"
            @change="handleFilterChange"
          >
            <SelectOption 
              v-for="inventor in inventorOptions" 
              :key="inventor" 
              :value="inventor"
            >
              {{ inventor }}
            </SelectOption>
          </Select>
        </FormItem>
        
        <FormItem label="申请机构">
          <Select
            v-model:value="filterForm.institution"
            placeholder="选择申请机构"
            allow-clear
            show-search
            :filter-option="filterOption"
            style="width: 250px"
            @change="handleFilterChange"
          >
            <SelectOption 
              v-for="institution in institutionOptions" 
              :key="institution" 
              :value="institution"
            >
              {{ institution }}
            </SelectOption>
          </Select>
        </FormItem>
        
        <FormItem>
          <Button type="primary" @click="handleSearch">
            <Icon icon="ant-design:search-outlined" />
            搜索
          </Button>
          <Button @click="handleReset" style="margin-left: 8px">
            <Icon icon="ant-design:reload-outlined" />
            重置
          </Button>
        </FormItem>
      </Form>
      
      <!-- 快速筛选标签 -->
      <div class="quick-filters">
        <div class="quick-filter-label">快速筛选：</div>
        <div class="quick-filter-tags">
          <Tag
            v-for="tag in quickFilterTags"
            :key="tag.key"
            :color="tag.color"
            @click="handleQuickFilter(tag)"
            class="quick-filter-tag"
          >
            {{ tag.label }}
          </Tag>
        </div>
      </div>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue';
import {
  Card,
  Form,
  FormItem,
  DatePicker,
  Select,
  SelectOption,
  Button,
  Tag
} from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import type { TimelineFilter } from '../TimeLine.types';

const { RangePicker } = DatePicker;

interface Props {
  inventorOptions: string[];
  institutionOptions: string[];
  loading?: boolean;
}

interface Emits {
  (e: 'filterChange', filter: TimelineFilter): void;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
});

const emit = defineEmits<Emits>();

const filterForm = reactive<TimelineFilter>({
  startDate: '',
  endDate: '',
  inventor: '',
  institution: '',
  eventType: ''
});

const dateRange = ref<[string, string] | null>(null);
const filterFormRef = ref();

// 快速筛选标签
const quickFilterTags = [
  { key: 'recent', label: '最近一年', color: 'blue' },
  { key: 'application', label: '仅申请', color: 'green' },
  { key: 'publication', label: '仅公布', color: 'orange' },
  { key: 'clear', label: '清除筛选', color: 'default' }
];

// 计算属性
const hasActiveFilters = computed(() => {
  return !!(
    filterForm.startDate ||
    filterForm.endDate ||
    filterForm.inventor ||
    filterForm.institution ||
    filterForm.eventType
  );
});

// 筛选选项过滤
const filterOption = (input: string, option: any) => {
  return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

// 处理日期范围变化
const handleDateRangeChange = (dates: [string, string] | null) => {
  if (dates && dates.length === 2) {
    filterForm.startDate = dates[0];
    filterForm.endDate = dates[1];
  } else {
    filterForm.startDate = '';
    filterForm.endDate = '';
  }
  handleFilterChange();
};

// 处理筛选条件变化
const handleFilterChange = () => {
  emit('filterChange', { ...filterForm });
};

// 搜索
const handleSearch = () => {
  emit('filterChange', { ...filterForm });
};

// 重置筛选
const handleReset = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key as keyof TimelineFilter] = '';
  });
  dateRange.value = null;
  emit('filterChange', {});
};

// 快速筛选
const handleQuickFilter = (tag: any) => {
  const now = new Date();
  const oneYearAgo = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate());
  
  switch (tag.key) {
    case 'recent':
      filterForm.startDate = oneYearAgo.toISOString().split('T')[0];
      filterForm.endDate = now.toISOString().split('T')[0];
      dateRange.value = [filterForm.startDate, filterForm.endDate];
      break;
    case 'application':
      filterForm.eventType = '申请';
      break;
    case 'publication':
      filterForm.eventType = '公布';
      break;
    case 'clear':
      handleReset();
      return;
  }
  
  handleFilterChange();
};

// 监听外部筛选条件变化
watch(() => props.loading, (newLoading) => {
  if (!newLoading) {
    // 数据加载完成后可以执行一些操作
  }
});
</script>

<style lang="less" scoped>
.advanced-filter {
  margin-bottom: 24px;
}

.filter-form {
  .ant-form-item {
    margin-bottom: 16px;
  }
}

.quick-filters {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-filter-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  margin-right: 8px;
}

.quick-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-filter-tag {
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    opacity: 0.8;
    transform: translateY(-1px);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .filter-form {
    .ant-form-item {
      margin-bottom: 12px;
    }
    
    .ant-form-item-control-input {
      width: 100%;
    }
  }
  
  .quick-filters {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .quick-filter-tags {
    width: 100%;
  }
}
</style>

